<template>
  <el-dialog
      v-model="materialDetailWinDialogVisible"
      title="查看物料/产品"
      width="70%"
      @close="handleClose"
  >
    <template #default>
      <el-form style="margin-top: 10px" :model="material" label-width="auto">

        <el-form-item style="font-weight: bold;width: 380px;float: left;" label="物料编码">
          <el-input v-model="material.materialCode" readonly/>
        </el-form-item>

        <el-form-item style="font-weight: bold;width: 400px;margin-left: 600px" label="物料名称">
          <el-input v-model="material.materialName" readonly/>
        </el-form-item>

        <el-form-item style="font-weight: bold" label="规格型号">
          <el-input v-model="material.specification" type="textarea" readonly/>
        </el-form-item>

        <el-form-item style="font-weight: bold;width: 300px;float: left;" label="单位">
          <el-select v-model="material.materialUnitCode" disabled/>
        </el-form-item>

        <el-form-item style="font-weight: bold;width: 300px;margin-left: 600px" label="物料/产品分类">
          <el-tree-select v-model="material.kindName" disabled/>
        </el-form-item>

        <el-form-item style="font-weight: bold;float: left" label="是否启用">
          <el-radio-group v-model="material.materialStatus" disabled>
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item style="font-weight: bold;margin-left: 600px" label="安全库存">
          <el-radio-group v-model="material.safeFlag" disabled>
            <el-radio :label=1>是</el-radio>
            <el-radio :label=2>否</el-radio>
          </el-radio-group>
        </el-form-item>

        <template v-if="material.safeFlag === 1">
          <el-form-item style="font-weight: bold;float: left" label="最小库存量">
            <el-input-number style="width: 220px" min="0" v-model="material.minStock" disabled/>
          </el-form-item>
          <el-form-item style="font-weight: bold;margin-left: 600px" label="最大库存量">
            <el-input-number style="width: 220px" min="0" v-model="material.maxStock" disabled/>
          </el-form-item>
        </template>

        <el-form-item style="font-weight: bold" label="备注">
          <el-input v-model="material.materialRemark" type="textarea" readonly/>
        </el-form-item>

      </el-form>

      <el-tabs type="border-card" v-show="1">
        <el-tab-pane label="BOM组成">
          <!--  BOM列表 -->
          <el-row style="margin: 10px 10px;padding:0px 15px;">
            <el-col :span="24">
              <el-table :data="boms" border stripe ref="bomTable">
                <el-table-column type="selection" fixed="left" align="center"/>
                <el-table-column prop="bomMaterialCode" label="物料编码" align="center"/>
                <el-table-column prop="bomMaterialName" label="物料名称" align="center"/>
                <el-table-column prop="bomMaterialSpec" label="规格" align="center"/>
                <el-table-column prop="bomUnitCode" label="单位" align="center"/>
                <el-table-column prop="useScales" label="使用比例" align="center"/>
                <el-table-column prop="remark" label="备注" align="center"/>
              </el-table>
            </el-col>
          </el-row>
          <el-row :span="5" style="margin-left: 680px">
            <el-col :span="1.5" style="color: dimgray;padding: 10px;margin-top: 5px">
              共 {{bomTotal}} 条
            </el-col>
            <el-col :span="2" style="padding: 10px">
              <el-pagination @change="changeBomPage" background layout="prev, pager, next" :total="bomTotal"/>
            </el-col>
          </el-row>
        </el-tab-pane>

        <el-tab-pane label="SIP">
          <!--  SIP列表 -->
          <el-row style="margin: 10px 10px;padding:0px 15px;">
            <el-col :span="24">
              <el-table :data="sips" border stripe ref="sipTable">
                <el-table-column prop="sipTitle" label="标题" align="center"/>
                <el-table-column prop="sipOrder" label="展示顺序" align="center"/>
                <el-table-column prop="processName" label="所属工序" align="center"/>
                <el-table-column prop="sipDescription" label="内容说明" align="center"/>
              </el-table>
            </el-col>
          </el-row>
          <el-row :span="5" style="margin-left: 680px">
            <el-col :span="1.5" style="color: dimgray;padding: 10px;margin-top: 5px">
              共 {{sipTotal}} 条
            </el-col>
            <el-col :span="2" style="padding: 10px">
              <el-pagination @change="changeSipPage" background layout="prev, pager, next" :total="sipTotal"/>
            </el-col>
          </el-row>
        </el-tab-pane>

        <el-tab-pane label="SOP">
          <h1>SOP</h1>
        </el-tab-pane>
      </el-tabs>

    </template>
    <template #footer>
      <el-button @click="cancelDetailMaterial">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch} from "vue";
import materialRequest from "@/api/material.js";
import bomRequest from "@/api/bom.js";
import sipRequest from "@/api/sip.js";
// 申明这个组件的事件  editComplete
const emits = defineEmits(['editComplete','cancelMaterialDetail'])
// 申明组件的属性
const props = defineProps(['materialId']);
// 弹窗标记
let materialDetailWinDialogVisible = ref(false);
// 详情对象
let material = ref({});

// 定义数组保存所有BOM信息
let boms = ref([]);
// 总条数，默认0
let bomTotal = ref(0);
// 当前页码，默认1
let curBomPage = ref(1);
// 查询结果
let bomTable = ref(null);

// 分页事件
function changeBomPage(value) {
  curBomPage.value = value;
  loadBoms(props.materialId);
}

/**
 * 加载BOM列表
 */
function loadBoms(materialId) {
  // 调用API来查询项目列表
  bomRequest.loadBOMs(materialId, curBomPage.value, 10, res => {
    // 这里的res就是后端返回的结果
    // 总条数赋值
    bomTotal.value = res.data.total;
    // 将查询的列表赋值给projects
    boms.value = res.data.list;
    console.log(boms)
  })
}

// 定义数组保存所有 SIP 信息
let sips = ref([]);
// 总条数，默认0
let sipTotal = ref(0);
// 当前页码，默认1
let curSipPage = ref(1);
// 查询结果
let sipTable = ref(null);

// 分页事件
function changeSipPage(value) {
  curSipPage.value = value;
  loadSips(props.materialId);
}

/**
 * 加载 SIP 列表
 */
function loadSips(materialId) {
  // 调用API来查询项目列表
  sipRequest.loadSIPs(materialId, curSipPage.value, 10, res => {
    // 这里的res就是后端返回的结果
    // 总条数赋值
    sipTotal.value = res.data.total;
    // 将查询的列表赋值给projects
    sips.value = res.data.list;
    console.log(sips)
  })
}

/**
 * 取消详情按钮事件
 */
function cancelDetailMaterial(){
  // 关闭窗体
  materialDetailWinDialogVisible.value = false;
  // 触发暴漏出去的取消编辑的事件
  emits("cancelMaterialDetail")
}

/**
 * 关闭窗体前的回调函数
 */
function handleClose(){
  // 触发暴漏出去的取消编辑的事件
  emits("cancelMaterialDetail")
}

/**
 * 通过materialId加载物料信息
 * @param materialId
 */
function loadMaterialById(materialId){
  materialRequest.selectById(materialId,res=>{
    if(res.data){
      material.value = res.data;
      // 弹窗
      materialDetailWinDialogVisible.value = true;
    }
  });
}

/**
 * 侦听器 侦听 props.materialId
 * // 每次属性props.materialId发生变化这里都会执行
 */
watch(()=>props.materialId,()=>{
  // 判断unitId是否是-1，如果是-1，说明是取消操作，不需要做任何操作。
  if(props.materialId != -1){
    // 如果不是-1 就加载要编辑的数据
    loadMaterialById(props.materialId);
    // 加载BOM对象
    loadBoms(props.materialId);
    // 加载 SIP 对象
    loadSips(props.materialId);
  }
});

</script>
<style scoped>

</style>